<template>
	<view class="page-box">
		<view style="padding: 10rpx;">
			<view class="pro-box" v-for="(item,index) in goodlist" :key="item._id"
			 @click="GoGoodDetail(item._id)">
				<image :src="item.image" mode="aspectFit"></image>
				<view class="pro-right">
					<view class="ptitle">{{item.title}}</view>
					<view class="bp">{{item.bp}}</view>
					<view class="price">￥{{item.price}}</view>
					<view style="color: #808080;font-size: 26rpx;">月销：{{item.num}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodlist:''
			}
		},
		onLoad(e) {
			// 动态设置导航栏标题
			uni.setNavigationBarTitle({
			    title: e.title
			});
			this.getList()
		},
		methods: {
			getList(e){
				uniCloud.callFunction({
					name:'goods',
					data:{
					},
					success: (rest) => {
						console.log(rest.result.data)
						this.goodlist = rest.result.data
					},
					fail: (err) => {
						console.log(err)
					}
				})
				},
			GoGoodDetail(id){
				console.log(id)
				uni.navigateTo({
					url:'/pages/goods/goods-detail'+`?id=${id}`
				})
				}
				
		}
	}
</script>

<style scoped lang="scss">
	.pro-box{
		margin:20rpx 24rpx;
		background-color: #FFFFFF;
		padding: 24rpx 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border-radius:12rpx ;
		image{
			width: 240rpx;
			height: 200rpx;
			display: block;
			border-radius: 12rpx;
			}
		}
		.pro-right{
			display: flex;
			flex-direction:column;
			width:360rpx;
			}
		.ptitle{
			font-size: 28rpx;
			line-height: 40rpx;
			font-weight:600rpx;
			color: #333333;
			}
		.bp{
			width:130rpx;
			background-color:#ff6633;
			font-size: 24rpx;
			text-align: center;
			font-weight: 400;
			line-height: 32rpx;
			color: #FFFFFF;
			opacity: 1;
			padding: 3rpx 12rpx;
			margin: 16rpx 0rpx;
			border-radius: 10rpx;
		}
		.price{
			font-size: 30rpx;
			font-weight: 600;
			line-height: 40rpx;
			color: #EA5B0C;
			opacity: 1;
		}
</style>
